import Vue from 'vue'
const component = {
  props: {
    active: Boolean,
    propOne: {
      type: String,
      required: false
    }
  },
  template: `<div>this is componet{{text}}
  <input type="text" v-model.number="propOne" />
  <span @click="handleChange">{{propOne}}</span>
  <span v-show="active">see me if active</span>
  </div>`,
  methods: {
    handleChange () {
      this.$emit('change')
    }
  },
  data () {
    return {
      text: 0
    }
  },
  mounted () {
    console.log('comp mounted')
  }
}

// const CompVue = Vue.extend(component)
// new CompVue({
//   el: '#root',
//   propsData: {
//     propOne: '1'
//   },
//   data: {
//     text: '123'
//   },
//   mounted () {
//     console.log('comp mounted cover')
//   }
// })

const component2 = {
  extends: component,
  data () {
    return {
      text: 1
    }
  }
}

new Vue({
  el: '#root',
  template: `<comp></comp>`,
  components: {
    Comp: component2
  },
  mounted () {
    console.log('comp2 mounted cover')
  }
})
